<template>
	<view class="content">
		<view class="nav">
			<view class="navItem" :class="navIndex == index ? 'navActive' : ''" v-for="(item, index) in navList" :key="index" @tap="navClick(index)">{{ item }}</view>
		</view>
		<view class="empty" v-if="mockList.length == 0">
			<i class="iconfont iconmeishuju"></i>
			<view class="empty_text">暂无内容</view>
		</view>
		<!-- 已做完的作业状态 -->
		<scroll-view class="scroll_content" scroll-y v-else>
			<view style="height: 80upx;"></view>
			<block v-for="(item, index) in mockList" :key="index">
				<view
					class="package"
					:class="[
						'which_status',
						item.correct_state == 1
							? 'which_status_type1'
							: item.correct_state == 2 && item.type != 4
							? 'which_status_type2'
							: item.correct_state == 3
							? 'which_status_type4'
							: item.correct_state == 2 && item.type == 4
							? 'which_status_type5'
							: 'which_status_type3'
					]"
				>
					<view class="grid_item cont_center">
						<view class="grid_r1">
							<text class="work-title">{{ item.name }}</text>
							<view>{{ item.subject_name }}</view>
						</view>
						<view class="grid_r2">开始时间：{{ item.start_time }}</view>
						<view class="grid_r2">截止时间：{{ item.end_time }}</view>
						<view class="grid_r5">
							<view @tap="pageChangeAna(item.class_log_id)" class="btn_item btn_analyse" v-if="item.type != 4 && item.correct_state == 2">试题解析</view>
							<view @tap="pageChangeMis(item.class_log_id)" class="btn_item btn_error" v-if="item.type != 4 && item.correct_state == 2">查看错题</view>
							<view @tap="pageChangeRep(item.class_log_id, item.type)" class="btn_item btn_report" v-if="item.type != 4 && item.correct_state == 2">练习报告</view>
							<!-- <view @tap="pageChangeSelf(item.class_log_id)" class="btn_item btn_ing" v-if="item.type != 4 && item.correct_state == 1 && item.correct_type == 1">
								自行批改
							</view> -->
							<view @tap="pageChangeCorr" class="btn_item btn_ing" v-if="item.type != 4 && item.correct_state == 1 && item.correct_type == 2">正在批改中...</view>
							<!-- <view @tap="startTask(item.class_log_id)" class='btn_item' v-if="item.correct_state == 3"></view> -->
							<view class="btn_item btn_start" v-if="item.correct_state == 0">未完成</view>
							<view class="finish" v-if="item.type == 4 && item.correct_state == 2">已完成</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
import cDate from '@/common/util.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	data() {
		return {
			data: uni.getStorageSync('courseCont'), //课程相关数据
			navList: ['预习内容', '课前练习', '随堂练习', '课后作业'],
			navIndex: 0,
			mockList: [],
			groupid: '',
			courseKey: '',
			is_exam_type: 1,
			type: 4,
			reload: true,
			page: 1,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: '没数据'
			},
			is_request:true,
			stuId: uni.getStorageSync('currentChild').student_id
		};
	},
	components: {
		uniLoadMore
	},
	onLoad(e) {
		this.courseKey = this.data.semester_week_id+'-'+this.data.time_lesson_id+'-'+this.data.day;
		this.groupid = this.data.class_id;
		// 请求练习列表
		this.requData();
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page = 1;
		this.requData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function() {
			_this.requData();
		}, 500);
	},
	methods: {
		navClick(index) {
			this.navIndex = index;
			switch (index) {
				case 0:
					this.type = '4';
					break;
				case 1:
					this.type = '2';
					break;
				case 2:
					this.type = '1';
					break;
				case 3:
					this.type = '3';
					break;
			}
			this.mockList = [];
			this.page = 1;
			this.reload = true;
			this.requData();
		},
		requData() {
			if(!this.is_request) return;
			this.is_request=false;
			var requestdata = {
				courseKey: this.courseKey,
				groupid: this.groupid,
				is_exam_type: this.is_exam_type,
				type: this.type,
				page: this.page,
				pagesize: 4,
				student_id: this.stuId
			};
			this.$zapi.apiPost('user/Grade.Stuhomework/gethomeworklist', requestdata).then(res => {
				if (res.data.code == 200) {
					var data = res.data.data.data;
					this.datas = data;
					for (var i = 0; i < data.length; i++) {
						data[i].start_time = cDate.getBriefTime(data[i].start_time);
						data[i].end_time = cDate.getBriefTime(data[i].end_time);
					}
					this.mockList = this.reload ? data : this.mockList.concat(data);
					this.reload = false;
					this.status = 'more';
				} else {
					if (this.reload) {
						this.mockList = [];
					} else {
						this.status = 'noMore';
					}
				}
				this.is_request=true;
			});
		},
		/* 跳转错题 */
		pageChangeMis(class_log_id) {
			uni.navigateTo({
				url: `../task/all?pagetype=error&class_log_id=${class_log_id}&is_exam_type=` + this.is_exam_type
			});
		},
		/* 跳转解析 */
		pageChangeAna(class_log_id) {
			uni.navigateTo({
				url: `../task/all?pagetype=correct&class_log_id=${class_log_id}&is_exam_type=` + this.is_exam_type
			});
		},
		/* 跳转报告 */
		pageChangeRep(class_log_id) {
			uni.navigateTo({
				url: `../child/practise_report?class_log_id=${class_log_id}&is_exam_type=${this.is_exam_type}&type=` + this.type
			});
		},
		/* 正在批改中提示 */
		pageChangeCorr() {
			uni.showToast({
				title: '批改完成后才可查看',
				icon: 'none'
			});
		}
	}
};
</script>

<style scoped>
.nav {
	height: 88upx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	background: #ffffff;
	z-index: 999;
}

.navItem {
	color: #666666;
	font-size: 34upx;
	display: flex;
	justify-content: center;
	line-height: 82upx;
	flex-direction: column;
	align-items: center;
}

.navActive {
	color: #ff9000;
}

.navActive:after {
	content: '';
	width: 32upx;
	height: 4upx;
	font-weight: bold;
	background: #ff9000;
}
.component-box {
	background: #ffffff;
	z-index: 999;
	position: fixed;
	display: flex;
	align-items: center;
	width: 750upx;
	height: 93upx;
	border-bottom: 1px solid #e5e5e5;
}

.item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	height: 38upx;
	border-right: 1px solid #e5e5e5;
}

.item-title {
	color: #333333;
	font-size: 36upx;
	transition: all 0.3s;
}

.active-item-title {
	color: #00d5a2;
}

.item:last-child {
	border: none;
}

.before {
	font-size: 48upx;
	color: #0d0408;
	margin-right: 20upx;
}

.active-before {
	color: #00d5a2;
}

.icon-styl {
	font-size: 48upx;
	color: #0d0408;
	transform: rotate(90deg);
	transition: all 0.3s;
	margin-left: 60upx;
}

.active-icon-styl {
	color: #00d5a2;
	transform: rotate(-90deg);
}

.pop-bg {
	position: fixed;
	width: 100%;
	height: calc(100% - 80upx);
	top: 93upx;
	z-index: 600;
	background-color: rgba(0, 0, 0, 0.3);
	/* transition: opacity 5s; */
}

.bg-con1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 93upx;
	padding-left: 30upx;
	padding-right: 30upx;
	border-bottom: 1px solid #e5e5e5;
	background-color: #ffffff;
}

.bg-con1:first-child {
	border-top: 1px solid #e5e5e5;
}

.opi-styl {
	color: #333333;
	font-size: 34upx;
}

.active-opi-styl {
	color: #00d5a2;
}

.gougou-styl {
	color: #00d5a2;
	font-size: 45upx;
}

.scroll_content {
	height: calc(100%);
	background-color: #eeeeee;
}

.which_status:before {
	display: inline-block;
	position: absolute;
	text-align: center;
	width: 200upx;
	height: 50upx;
	color: #ffffff;
	transform: rotate(-45deg) translate(-60upx, -25upx);
}

.which_status_type1:before {
	content: '未批改';
	background-color: #00acfe;
}

.which_status_type2:before {
	content: '已批改';
	background-color: #00d5a2;
}

.which_status_type3:before {
	content: '未完成';
	background-color: #ff9900;
}

.which_status_type4:before {
	content: '已超时';
	background-color: #ff7171;
}

.which_status_type5:before {
	content: '已完成';
	background-color: #00d5a2;
}

.package {
	position: relative;
	margin-bottom: 20upx;
	background-color: #ffffff;
	overflow: hidden;
}

.grid_item {
	/* display: grid; */
	grid-template-columns: 700upx;
	grid-template-rows: auto auto auto auto auto;
	width: 700upx;
}

.grid_r1 {
	font-weight: bold;
	font-size: 36upx;
	height: 92upx;
	line-height: 92upx;
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
	display: inline-flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.work-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-indent: 72upx;
}

.grid_r1 view {
	width: 28upx;
	height: 28upx;
	padding: 2upx 4upx;
	line-height: 1.1;
	background: #00acfe;
	color: #ffffff;
	border-radius: 8upx;
	margin-left: 18upx;
}

.score {
	display: inline-flex;
	float: right;
	font-weight: Regular;
	font-size: 34upx;
	line-height: 72upx;
	color: #666666;
}

.grid_r2 {
	font-weight: Regular;
	font-size: 34upx;
	color: #666666;
	height: 72upx;
	line-height: 72upx;
	border-bottom: 1px solid #e5e5e5;
}

.grid_r5 {
	display: flex;
	flex-direction: row-reverse;
}

.btn_item {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0;
	font-weight: Regular;
	font-size: 34upx;
	line-height: 34upx;
	padding: 14upx 26upx;
	color: #ffffff;
	margin: 32upx 0 26upx 20upx;
}

.btn_report {
	background-color: #00d555;
}

.btn_error {
	background-color: #ff9000;
}

.btn_analyse {
	background-color: #00adff;
}

.btn_check {
	background-color: #005ccc;
}

.btn_start {
	background-color: #00acfe;
}

.btn_ing {
	color: #a665fb;
	padding: 0;
}

.iconmeishuju {
	color: #ff9900;
	font-size: 400upx;
	display: flex;
	justify-content: center;
	align-content: center;
}

.empty_text {
	font-size: 38upx;
	color: #999999;
	text-align: center;
	margin-top: -200upx;
}

.finish {
	color: #00d5a2;
	line-height: 120upx;
	font-weight: bold;
	font-size: 34upx;
}
</style>
